<template>
  <div>
    <h3>欢迎光临_Vue开发的收银系统_水果店</h3>
    <h4>苹果 {{price}} ￥/斤,折扣:( {{zhe}} )折</h4>
    请输入你要购买的斤数：<input type="text" name="" id="" v-model="num">
    <br>
    <button @click="btn">结账买单~</button>
    <h3>结账单：总价：{{zong}} ￥元 折后价:{{zhehou}} ￥元 省了：{{sheng}} ￥元</h3>
  </div>
</template>

<script>
export default {
  data () {
    return {
      price: 10,
      zhe: 8,
      zong: '',
      zhehou: '',
      sheng: '',
      num: ''
    }
  },

  created () {

  },

  methods: {
    btn () {
      this.zong = this.num * this.price
      this.zhehou = this.num * this.price * this.zhe / 10
      this.sheng = this.zong - this.zhehou
    }
  }
}
</script>

<style scoped lang='less'>

</style>
